<template>
	<div class="app-container">
		<el-form class="filter-container" ref="dataForm" :model="listQuery" label-position="left" label-width="68px">
			<el-row :gutter="24">
				<el-col :span="9">
					<el-form-item label="更新时间" style="margin-bottom: 0!important;">
						<el-date-picker type="datetimerange" :default-foundTime="['00:00:00', '23:59:59']" @keyup.enter.native="getList" class="filter-item" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" v-model="listQuery.foundTime" :picker-options="pickerOptions" clearable></el-date-picker>
					</el-form-item>
				</el-col>
				<el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="getList">{{$t('table.search')}}</el-button>
				<el-button class="filter-item" type="warning" @click="userSet">热点提取设置</el-button>
			</el-row>
		</el-form>
		<el-table :data="list" v-loading="listLoading" element-loading-text="加载中..." border fit highlight-current-row @selection-change="handleSelectionChange" style="width: 100%">
      <el-table-column align="center" label="热点名称" min-width="100">
      	<template slot-scope="scope">
      		<el-button class="preview-button" type="text" @click="handleShow(scope.row)">{{scope.row.hotName}}</el-button>
      	</template>
      </el-table-column>
			<el-table-column label="最新资讯" align="center" min-width="200">
				<template slot-scope="scope">
					<p v-for="(item, index) in scope.row.listNews" style="text-align: left;">{{ index + 1 }}.{{ item }}</p>
				</template>
			</el-table-column>
			<el-table-column label="核心标签" align="center" min-width="80">
				<template slot-scope="scope">
					<el-tag v-for="tag in scope.row.listTags" :key="tag" size="small">{{ tag }}</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="createTime" label="创建时间" align="center" width="160"></el-table-column>
			<el-table-column prop="updateTime" label="更新时间" align="center" width="160"></el-table-column>
			<el-table-column align="center" label="热点状态">
				<template slot-scope="scope">
					<el-tag size="small" :type="formatClass(scope.row.hotStatus)">{{ formatStatu(scope.row.hotStatus) }}</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="hot" label="热度" align="center"></el-table-column>
			<el-table-column label="操作" align="center" width="200">
				<template slot-scope="scope">
					<el-button v-if="scope.row.hotStatus == 0" size="mini" @click="handlePush(scope.row)">热点推送</el-button>
          <el-button v-else size="mini" @click="handleBack(scope.row)">取消推送</el-button>
					<el-button size="mini" type="danger" @click="handleDelete(scope.row)" :disabled='scope.row.hotStatus == 1'>移除热点</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div class="pagination-container">
			<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.pageNum" :page-sizes="[10, 20, 30, 50]" :page-size="listQuery.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
			</el-pagination>
		</div>
		<el-dialog title="热点提取设置" :visible.sync="dialogFormUser" :closeOnClickModal='false'>
			<el-form :rules="gethotObjRules" ref="gethotObj" :model="gethotObj" label-position="left" label-width="80px" style='margin: 24px;'>
				<el-form-item label="添加模式" prop="policyType">
				  	<el-radio-group v-model="gethotObj.policyType" @change='addRadioChange'>
					    <el-radio :label="0">自动加入</el-radio>
					    <el-radio :label="1">手动加入</el-radio>
				  	</el-radio-group>
				</el-form-item>
				<el-form-item label="更新策略" prop="updatePolicy" v-if='addModel'>
					<el-select v-model="gethotObj.updatePolicy" type="text" placeholder="请选择" @change="changePolicy">
					 	<el-option v-for="item in topicPolicy" :key="item.code" :label="item.value" :value="item.code"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="更新周期" prop="updatePeriod" v-if='addModel'>
					<el-select v-model="gethotObj.updatePeriod" type="text" placeholder="请选择">
						<el-option v-for="item in middleware" :key="item.code" :label="item.value" :value="item.code"></el-option>
					</el-select>
				</el-form-item>
<!-- 				<el-form-item label="事件选取" prop="eventSelected" v-if='addModel'>
					<el-select v-model="gethotObj.eventSelected" type="text" placeholder="请选择">
						<el-option v-for="item in eventSelected" :key="item.code" :label="item.value" :value="item.code"></el-option>
					</el-select>
				</el-form-item> -->
				<el-form-item label="主题选取" prop="topicSelected" v-if='addModel'>
					<el-select v-model="gethotObj.topicSelected" type="text" placeholder="请选择">
						<el-option v-for="item in topicSelected" :key="item.code" :label="item.value" :value="item.code"></el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormUser = false">取消</el-button>
				<el-button type="primary" @click="updateUser">确定</el-button>
			</div>
		</el-dialog>
    <el-dialog :fullscreen='true' title="热点详情" :visible.sync="dialogFormVisible">
    	<el-form ref="temp" :model="temp" label-position="left" label-width="130px" style='margin: auto; max-width: 1200px'>
    		<el-row :gutter="24">
    			<el-col :span="12">
    				<el-form-item label="主题名称" prop="topicName">
    					<el-input v-model.trim="temp.topicName" type="text" placeholder="请输入" disabled></el-input>
    				</el-form-item>
    			</el-col>
    			<el-col :span="12">
    				<el-form-item label="审核管理" prop="adjustModel">
    					<el-select v-model="temp.adjustModel" placeholder="请选择" disabled>
    						<el-option label="自动审核" :value='1'></el-option>
    						<el-option label="手动审核" :value="0"></el-option>
    					</el-select>
    				</el-form-item>
    			</el-col>
    			<el-col :span="12">
    				<el-form-item label="核心标签" prop="keyword">
    					<el-select disabled v-model="temp.keyword" filterable value-key='keyword' placeholder="请选择">
    						<el-option v-for="(item, index) in tagOptions" :key="item.keyword" :label="item.keyword" :value="item">
    							<span style="float: left">{{ item.keyword }}</span>
    							<span style="float: right; color: #8492a6; font-size: 13px">{{ item.num }}</span>
    						</el-option>
    					</el-select>
    				</el-form-item>
    			</el-col>
    			<el-col :span="12">
    				<el-form-item label="主题热度" prop="topicHot">
    					<el-input disabled v-model="temp.topicHot" placeholder="请选择核心标签"></el-input>
    				</el-form-item>
    			</el-col>
          <el-col :span="24">
          	<el-form-item label="主题描述" prop="descript">
          		<el-input v-model="temp.descript" type="textarea" :rows="3" :maxlength='200' placeholder="请输入" disabled></el-input>
          	</el-form-item>
          </el-col>
    			<el-col :span="24">
    				<el-form-item label="事件驱动">
    					<el-table element-loading-text="加载中..." stripe max-height="500" :data="temp.topicEvents" style="width: 100%" border fit highlight-current-row>
    						<el-table-column prop="createTime" label="发生时间" align="center" width="100"></el-table-column>
    						<el-table-column label="事件名称" align="center" min-width="100">
			                  	<template slot-scope="scope">
			                      	<el-button class="preview-button" type="text" @click="eventInfo(scope.row, true)">{{ scope.row.eventTitle }}</el-button>
			                  	</template>
    						</el-table-column>
    						<el-table-column label="事件标签" align="center" min-width="100">
    							<template slot-scope="scope">
    								<el-tag v-for="(tag, index) in scope.row.lisTags" :key="tag.keyword">{{ tag.keyword }}</el-tag>
    							</template>
    						</el-table-column>
    						<el-table-column prop="eventDescript" label="事件描述" align="center" show-overflow-tooltip></el-table-column>
    					</el-table>
    				</el-form-item>
    			</el-col>
    			<!--<el-col :span="24">
    				<el-form-item label="未知事件">
    					<el-table element-loading-text="加载中..." stripe max-height="500" :data="temp.unTopicEvents" style="width: 100%" border fit highlight-current-row>
    						<el-table-column prop="createTime" label="发生时间" align="center" width="100"></el-table-column>
    						<el-table-column label="事件名称" align="center" min-width="100">
			                  	<template slot-scope="scope">
			                      	<el-button class="preview-button" type="text" @click="eventInfo(scope.row, false)">{{ scope.row.eventTitle }}</el-button>
			                  	</template>
    						</el-table-column>
    						<el-table-column label="事件标签" align="center" min-width="100">
    							<template slot-scope="scope">
    								<el-tag v-for="(tag, index) in scope.row.lisTags" :key="tag.keyword">{{ tag.keyword }}</el-tag>
    							</template>
    						</el-table-column>
    						<el-table-column prop="eventDescript" label="事件描述" align="center" show-overflow-tooltip></el-table-column>
    					</el-table>
    				</el-form-item>
    			</el-col>-->
				<el-col :span="24">
					<el-form-item label="历史新闻">
						<el-table v-loading="infoScLoading" stripe max-height="500" :data="temp.listNewsInfoSc" style="width: 100%" border fit highlight-current-row>
							<el-table-column type="index" width="40" align="center"></el-table-column>
							<el-table-column label="标题" align="center" min-width="200">
			                  	<template slot-scope="scope">
			                  		<el-button class="preview-button" type="text" @click="showInfo(scope.row)">{{scope.row.title}}</el-button>
			                  	</template>
            				</el-table-column>
							<el-table-column prop="summary" label="摘要" align="center" min-width="300"></el-table-column>
							<el-table-column prop="createTime" label="创建时间" align="center" width="100"></el-table-column>
							<el-table-column prop="updateTime" label="更新时间" align="center" width="100"></el-table-column>
							<el-table-column prop="source" label="来源" align="center"></el-table-column>
							<el-table-column label="态度" align="center" width="65">
								<template slot-scope="scope">
									<span v-if="scope.row.attitude == -1" class="tagColor" style="background-color: #4cba2a;">&nbsp;利空&nbsp;</span>
									<span v-else-if="scope.row.attitude == 0" class="tagColor" style="background-color: #c5d106;">&nbsp;中性&nbsp;</span>
									<span v-else="scope.row.attitude == 1" class="tagColor" style="background-color: red;">&nbsp;利好&nbsp;</span>
								</template>
							</el-table-column>
						</el-table>
						<div class="pagination-container" style="margin-top: 10px;">
							<el-pagination background @size-change="newsSizeChange" @current-change="newsCurrentChange" :current-page.sync="newsObj.pageNum" :page-sizes="[10, 20, 30, 50]" :page-size="newsObj.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="newsTotal"></el-pagination>
						</div>
					</el-form-item>
				</el-col>
    			<el-col :span="24">
    				<el-form-item label="相关股票">
    					<el-table element-loading-text="加载中..." stripe max-height="530" :data="temp.topicStocks" style="width: 100%" border fit highlight-current-row>
    						<el-table-column prop="stockCode" label="股票代码" align="center"></el-table-column>
    						<el-table-column prop="stockName" label="股票名称" align="center"></el-table-column>
    						<el-table-column label="相关度" align="center">
    							<template slot-scope="scope">
    								<el-rate v-model="scope.row.stockSimilar" disabled></el-rate>
    							</template>
    						</el-table-column>
    						<el-table-column label="龙头" align="center">
    							<template slot-scope="scope">
    								<el-select v-model="scope.row.isTop" type="text" placeholder="请选择" disabled>
    									<el-option label="是" :value='1'></el-option>
    									<el-option label="否" :value='0'></el-option>
    								</el-select>
    							</template>
    						</el-table-column>
    					</el-table>
    				</el-form-item>
    			</el-col>
    		</el-row>
    	</el-form>
    	<div slot="footer" class="dialog-footer">
    		<el-button type="primary" @click="dialogFormVisible = false">关闭</el-button>
    	</div>
    	<!--<el-dialog append-to-body :fullscreen='true' :title="evtInfoTitle" :visible.sync="evtDialogInfo">
    		<div v-if='evtDialogInfo'>
    			<evtInfoPreview :infoMsg='evtMsg' @closeFile='evtCloseFile'></evtInfoPreview>
    		</div>
    	</el-dialog>-->
    	<el-dialog append-to-body :fullscreen='true' :title="evtInfoTitle" :visible.sync="evtDialogInfo">
    		<div v-if='evtDialogInfo'>
    			<component :is="currentEvt" :infoMsg='evtMsg' @closeFile='evtCloseFile'></component>
    		</div>
    	</el-dialog>
		<el-dialog append-to-body :fullscreen='true' :title="infoTitle" :visible.sync="dialogInfo">
			<div v-if='dialogInfo'>
				<component :is="currentView" :infoMsg='infoMsg' @closeFile='closeFile'></component>
			</div>
		</el-dialog>
    </el-dialog>
	</div>
</template>

<script>
	import { hotList, hotPush, deleteHot, getHotSet, getHotInfo, saveSet, themeGet, coreTagGet, hotBack, newsByHot } from '@/api/events'
	import waves from '@/directive/waves' // 水波纹指令
  	import evtInfoPreview from './evtInfoPreview'
  	import unevtInfoPreview from './unevtInfoPreview'
  	import intellPreview from '../project/intellPreview'
	import origPreview from '../project/origPreview'
	import roboPreview from '../project/roboPreview'

	export default {
		name: 'hotManage',
    	components: { 
	    	evtInfoPreview,
	    	unevtInfoPreview,
			intellPreview,
			origPreview,
			roboPreview
    	},
		directives: {
			waves
		},
		data() {
			return {
				list: null,
				total: null,
				listLoading: true,
				multipleSelection: [],
				multipleSelectionIds: [],
				dialogFormUser: false,
				infoScLoading: false,
				dialogFormVisible: false,
				addModel:true,
				eventSelected: [],
				topicSelected: [],
				newsTotal: null,
				topicPeriod: [],
				topicPeriodSc: [],
				topicPolicy: [],
				middleware: [],
		        evtDialogInfo: false,
		        dialogInfo: false,
		        infoMsg: {},
		        evtMsg: {},
		        infoTitle: '',
		        evtInfoTitle: '',
		        tagOptions: [],
		        currentView: 'intellPreview',
		        currentEvt: 'evtInfoPreview',
				newsObj: {
				    "pageSize":10,
				    "pageNum":1,
				    "id":null
				},
		        temp: {
		        	auditStatus: 0,
		        	createTime: '',
		        	creater: '',
		        	dataStatus: 0,
		        	id: '',
		        	isHot: '',
		        	keyword: '',
		        	kinds: '',
		        	topicName: '',
		        	adjustModel: 1,
		        	topicStatus: 0,
		        	topicHot: '',
		        	topicStocks: [],
		        	topicEvents: [],
		        	unTopicEvents: [],
		        	listNewsInfoSc: [],
		        	updateTime: '',
		        	updater: ''
		        },
				listQuery: {
					pageNum: 1,
					pageSize: 20,
					isHot: 1,
					startTime: '',
					endTime: '',
					foundTime:[]
//					foundTime: [new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() + 1).getTime() - 24 * 3600 * 1000, new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() + 1).getTime() - 1000],
				},
				gethotObj: {
					policyType: '',
					updatePolicy: '',
					updatePeriod: '',
					eventSelected: '',
					topicSelected: ''
				},
				gethotObjRules: {
//					useTime: [{ type: 'number', message: '请输入5-1440的数字', trigger: 'blur' }]
				},
				pickerOptions: {
					shortcuts: [{
						text: '今天',
						onClick(picker) {
							const end = new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() + 1).getTime() - 1000
							const start = end + 1000 - 3600 * 1000 * 24
							picker.$emit('pick', [start, end])
						}
					}, {
						text: '最近三天',
						onClick(picker) {
							const end = new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() + 1).getTime() - 1000
							const start = end + 1000 - 3600 * 1000 * 24 * 3
							picker.$emit('pick', [start, end])
						}
					}, {
						text: '最近一周',
						onClick(picker) {
							const end = new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() + 1).getTime() - 1000
							const start = end + 1000 - 3600 * 1000 * 24 * 7
							picker.$emit('pick', [start, end])
						}
					}]
				}
			}
		},
		created() {
			this.getList()
			this.getSelectList()
		},
		methods: {
			getList() {
				this.listLoading = true
				const params = Object.assign({}, this.listQuery)
				if(this.listQuery.foundTime) {
					params.startTime = this.listQuery.foundTime[0]
					params.endTime = this.listQuery.foundTime[1]
				} else {
					params.startTime = ''
					params.endTime = ''
				}
				hotList(params).then(res => {
					this.listLoading = false
					this.list = res.Data
					this.total = parseInt(res.total)
				})
			},
			getSelectList(){
				getHotSet().then(res => {
					let tar = res.Data[0] || []
					this.eventSelected = Object.assign([], tar.eventSelected || [])
					this.topicSelected = Object.assign([], tar.topicSelected)
					this.topicPeriod = Object.assign([], tar.topicPeriod)
					this.topicPolicy = Object.assign([], tar.topicPolicy)
					this.topicPeriodSc = Object.assign([], tar.topicPeriodSc)
				})
        coreTagGet({ keyword: '' }).then(res => {
        	this.tagOptions = Object.assign([], res.Data)
        })
			},
			handleSizeChange(val) {
				this.listQuery.pageSize = val
				this.getList()
			},
			handleCurrentChange(val) {
				this.listQuery.pageNum = val
				this.getList()
			},
			handleSelectionChange(val) {
				this.multipleSelection = val
				this.multipleSelectionIds = val.map(e => e.id)
			},
			userSet() {
				getHotInfo().then(res => {
					let tar = res.Data[0] || {}
					this.gethotObj = Object.assign({}, tar)
					if(tar.updatePolicy){
						this.middleware = Object.assign([], this.topicPeriodSc)
					} else {
						this.middleware = Object.assign([], this.topicPeriod)
					}
					if(tar.policyType){  //手动加入1
						this.addModel = false
					}
					this.dialogFormUser = true
					this.$nextTick(() => {
						this.$refs['gethotObj'].clearValidate()
					})
	    		})
			},
			changePolicy(val){  //0时间间隔 1固定时间
				this.gethotObj.updatePeriod = 0
				if(val){
					this.middleware = Object.assign([], this.topicPeriodSc)
				} else {
					this.middleware = Object.assign([], this.topicPeriod)
				}
			},
			updateUser() {
				this.$refs['gethotObj'].validate(valid => {
					if(valid) {
				    	saveSet(this.gethotObj).then(() => {
				    		this.getList()
							this.dialogFormUser = false
							this.$notify({ title: '成功', message: '热点提取设置成功', type: 'success', duration: 5000 })
			    		})
					}
				})
			},
			handleDelete(row) {
				this.$confirm('确认移除, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					const obj = {
						id:row.id
					}
		          	deleteHot(obj).then(() => {
		          		this.$notify({ title: '成功', message: '移除成功', type: 'success', duration: 2000 })
						this.getList()
		          	})
				}).catch(() => {
					this.$message({ type: 'info', message: '已取消移除' })
				})
			},
			formatClass(data) {
				switch(data) {
					case 0:
						return 'warning'
					case 1:
						return 'success'
				}
			},
			formatStatu(data) {
				switch(data) {
					case 0:
						return '未推送'
					case 1:
						return '已推送'
				}
			},
			getNewsList() {
				this.infoScLoading = true
				newsByHot(this.newsObj).then(res => {
					this.temp.listNewsInfoSc = Object.assign([], res.Data)
					this.newsTotal = parseInt(res.total)
					this.infoScLoading = false
					this.$nextTick(() => {
						this.$refs['temp'].clearValidate()
					})
				})
			},
			newsSizeChange(val) {
				this.newsObj.pageSize = val
				this.getNewsList()
			},
			newsCurrentChange(val) {
				this.newsObj.pageNum = val
				this.getNewsList()
			},
			handleShow(row) {
				themeGet(row.relationId).then(res => {
					this.temp = Object.assign({}, res.Data[0])
					this.newsObj.id = row.relationId
					this.getNewsList()
					this.dialogFormVisible = true
					this.$nextTick(() => {
						this.$refs['temp'].clearValidate()
					})
				})
			},
			showInfo(row) {
				this.infoMsg = Object.assign({}, row)
				this.infoMsg.news_id = this.infoMsg.id
				if(row.isOriginal == 0){
					this.currentView = 'origPreview'
					this.infoTitle = '原创资讯详情'
				}else if(row.isOriginal == 1){
					this.currentView = 'intellPreview'
					this.infoTitle = '智能资讯详情'
				}else if(row.isOriginal == 2){
					this.currentView = 'roboPreview'
					this.infoTitle = '机器写稿详情'
				}
				this.dialogInfo = true
			},
			eventInfo(row, boo) {
				this.evtMsg = Object.assign({}, row)
				if(boo){
					this.currentEvt = 'evtInfoPreview'
					this.evtInfoTitle = '已知事件详情'
				}else{
					this.currentEvt = 'unevtInfoPreview'
					this.evtInfoTitle = '未知事件详情'
				}
				this.evtDialogInfo = true
			},
      		evtCloseFile() {
		      	this.evtDialogInfo = false
	      	},
	      	closeFile() {
		      	this.dialogInfo = false
	      	},
			handlePush(row) {
				this.$confirm('确认推送, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					const obj = {
						id:row.id
					}
		          	hotPush(obj).then(() => {
			            this.$notify({ title: '成功', message: '推送成功', type: 'success', duration: 2000 })
			            this.getList()
		          	})
				}).catch(() => {
					this.$message({ type: 'info', message: '已取消操作' })
				})
			},
      handleBack(row){
        this.$confirm('确认取消推送, 是否继续?', '提示', {
        	confirmButtonText: '确定',
        	cancelButtonText: '取消',
        	type: 'warning'
        }).then(() => {
        	const obj = {
        		id:row.id
        	}
          hotBack(obj).then(() => {
            this.$notify({ title: '成功', message: '已取消推送', type: 'success', duration: 2000 })
            this.getList()
          })
        }).catch(() => {
        	this.$message({ type: 'info', message: '已取消操作' })
        })
      },
			addRadioChange(val){
				if(val) return this.addModel = false
				this.addModel = true
			}
		}
	}
</script>
<style scoped>
	.el-tag {
		margin-right: 5px;
	}
	.tagColor {
		color: white;
		border-radius: 5px;
	}
</style>
